
"use client"; // 添加这一行，使组件变为 Client Component
import { useRouter } from 'next/navigation';
import { useAppDispatch } from "@/store/client";
import { getLogin } from "@/store/client/modules/usersStore";
import { Button, Card, Col, Form, FormProps, Input, Row } from "antd";
import { useEffect, useState } from 'react';
import useWebSockets from '@/utils/socktUtils';
import { getCodeImg } from '@/clientApi/login';
import { ReloadOutlined } from '@ant-design/icons';



type FieldType = {
    userName?: string;
    password?: string;
    code?: string;
};
export default function login() {
    const [codeImg, setCodeImg] = useState<string>('');
    const [uuid, setUuid] = useState<string>('');
    const router = useRouter();
    const dispatch = useAppDispatch()
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        console.log('Success:', values);
        const data = {
            userName: values.userName,
            password: values.password,
            code: values.code,
            uuid
        }
        dispatch(getLogin({ data, router })).then((res:any) => {
            console.log('res', res);
            // 登录成功后的操作
            if(res.code !== 200){
                   getCode()
            }
       
        });

    };

    const onFinishFailed: FormProps<FieldType>['onFinishFailed'] = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const { connectWebSocket } = useWebSockets()
    useEffect(() => {
        getCode()
        connectWebSocket("user_1")
    }, [])
    const getCode = () => {
        getCodeImg().then((res: any) => {
            setCodeImg("data:image/gif;base64," + res.img);
            setUuid(res.uuid);
        })
    };
    return (<>
       
            <Form
                name="basic"
                labelCol={{ span: 6 }}
                wrapperCol={{ span: 18 }}
                style={{ maxWidth: 300 }}
                initialValues={{ remember: true }}
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                autoComplete="off"
            >
                <Form.Item<FieldType>
                    label="账号"
                    name="userName"
                    rules={[{ required: true, message: '请填写账户' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item<FieldType>
                    label="密码"
                    name="password"
                    rules={[{ required: true, message: '请填写密码' }]}
                >
                    <Input.Password />
                </Form.Item>
                <Form.Item<FieldType>
                    label="验证码"
                    name="code"
                    rules={[{ required: true, message: '验证码不能为空' }]}
                >
                    <div style={{ display: 'flex', gap: 8 }}>
                        {/* 验证码输入框 */}
                        <Input
                            placeholder="验证码"
                            style={{ flex: 1 }}
                        />
                        {/* 验证码图片 + 刷新按钮 */}
                        <div style={{ display: 'flex', alignItems: 'center' }}>
                            <img
                                src={codeImg}
                                alt="验证码"
                                style={{
                                    width: 100,
                                    height: 40,
                                    cursor: 'pointer',
                                    borderRadius: 4
                                }}
                                onClick={getCode} // 点击图片刷新验证码
                            />
                        </div>
                    </div>
                </Form.Item>
                <Form.Item label={null}>
                    <Button type="primary" htmlType="submit">
                        登录
                    </Button>
                </Form.Item>
            </Form>
    </>);
}


